//生产和开发公共配置
const path = require("path")
const HtmlWebpackplugin = require('html-webpack-plugin')
//显示打包进度配置，为webpack内置插件
const { ProgressPlugin } = require('webpack')
const { ProvidePlugin } = require("webpack")


const { resolve } = require("path")
const { title } = require("process")
// const { clear } = require("console")
module.exports = {
    //入口
    entry: {
        // app: path.resolve(__dirname, "../", "src/main.js")

        chunk: ['react', 'react-dom/client'],
        app: {
            // import是用来指定业务代码的入口
            import: path.resolve(__dirname, "../", "src/main.js"),
            //依赖chunk
            dependOn: "chunk"
        }
    },
    //出口
    output: {
        path: path.resolve(__dirname, '../dist'),
        // filename: "[name].[chunkhash:8].js"  //哈希值命名，输入的JS模块所依赖的源码发生了变化，打包时，hash值也会发生变化，用于解决浏览器缓存导致页面不刷新的问题。

        filename: "js/[name].[chunkhash:8].js", //把文件放在js文件下
        clean: true, //每次硬件打包，自动删除之前打包文件
    },
    plugins: [
        new HtmlWebpackplugin({
            // template: './public/index.html'  //template用来指定页面的位置，也可使用绝对路径
            template: path.resolve(__dirname, '../', 'public/index.html'),
            inject: 'body',//把打包好的js文件放入到body标签结束之前
            title: 'HWPTitle', //设置内存打包的页面标题
            // filename:'index.html'  //设置硬件打包的文件标题，一般为index
            // favicon:path.resolve(__dirname,'../','public/favicon.ico')  设置页面标题的小商标
        }),
        new ProgressPlugin(),
        //把react配置到全局
        new ProvidePlugin({
            React: path.resolve(__dirname, "../", "node_modules/react/index.js"),
        })
    ],
    //模块
    module: {
        rules: [
            //当webpack工作时，遇到.js结尾的模块，使用babel-loader进行加载
            //loader是用来加载的，加载完后，使用@babel/**  进行编译转化，转化成es5代码
            { test: /\.(js|jsx|ts|tsx)$/, use: 'babel-loader', exclude: /node_modules/ }, //webpack不打包node_module

            // 当webpack工作时，遇到了以.css结尾的模块，使用css-loader加载解析返回内容交给style-loader来处理
            // style-loader可以把css-loader处理后结果，以操作DOM的形式，插入到head标签中，就是内部样式。
            { test: /\.(css|scss)$/, use: ["style-loader", "css-loader", "sass-loader"] }
        ]
    }
}

